第一波 UI&UX 小技巧来啦～

▲点击 "TCC翻译情报局" 关注，回复 "社群" 加入我们

本文共 3204 字，预计阅读 9 分钟

TCC 情报局的 第 187 篇 干货分享

2023 年的 第 16 篇

TCC 推荐：大家好，这里是 TCC 翻译情报局，我是李泽慧。在做界面设计时，往往细节决定成败。好的细节往往可以起到“四两拨千斤”的作用，让你的设计档次大幅提升。今天我们就来看看web设计中有哪些好用的小技巧吧～

当你在为项目创建高效、无障碍、美观的 UI 界面时，有时候只需要一些小小的调整就可以快速改善你的设计。

在这篇文章中，我收集了一些易于投入实践的小技巧，只需要付出一点点努力，就可以改善设计和用户体验。

噢，今天的例子都是以“独特的”8 比特像素风格呈现的，让我们开始吧.……

1.喜欢留白

1.Love the Whitespace

留白 是你的设计之友，不断地用它来改善你的 UI 界面。           

 适当的留白让设计更有“呼吸感”（右）

2.文字对比

2.Contrast that text.

确保你的文字有强烈的对比。为无障碍设计，而非仅仅装饰。

有强烈的对比使界面更易读（右）

3.只用一种字体

3.Just the one Typeface.

在你的设计中最好 只用一种字体。   

只用一种字体让界面更加规整统一

4.基础色装饰

4.Base in your face.

选择一个基本色，然后简单地用 色调和阴影来增加统一性。       

 利用基础色来协调统一性

5.留私心给 CTA 按钮

5.Be selfish with your CTA.

将颜色留给你的 CTA 按钮[1]，要让 CTA 按钮很“自私”   （[1] CTA按钮：行为召唤按钮，即最希望用户操作的按钮）

不要滥用颜色，颜色用以强化CTA按钮的重要性（右）

6.用户知情

6.Keep ‘em informed.

不要让用户猜接下来会发生什么，让他们对旅程中的每个节点都知情。 

告诉用户接下来会发生什么，打消用户顾虑（右）

7.用户知情

7.It’s all about the prominence.

给屏幕中最重要的元素 更多突出的表现。

把重要的信息“购物车”“价格”变得更突出（右）

8.图标加文字标签

8.Icons love labels.

给你的图标加上 文字说明会更容易理解。

图标增加文字标签说明，更容易理解（下）

9.保持亲密接近

9.Keep close proximity.

接近性，一个关键的设计原则，经常使用，好好使用！

让有关联性的元素接近，更容易被认知为一组（右）

10.让“搜索”亮眼

10.Make that Search shine.

设计内容繁重的网页？确保“搜索”成为一个明显的功能。

重内容的网站，把“搜索”的样式做得更明显（右）

11.让用户知道

11.Keep that user informed.

告诉用户他们 采取具体行动 后将发生什么事情。

不论好坏，告诉用户接下来会发生什么（右）

12.加载...

12.Loading…

当 App 正在加载时，确保用户知道系统正在运作。

用加载告知用户，系统还在工作（右）

13.降低行高

13.Reduce dat line-height.

在 标题处降低行高 是好的。

降低标题的行高（下）

14.减小字母间距

14.Reduce da letter-spacing.

为了 保持标题的视觉平衡，请减少字母间距。

减少字母间距（下）

15.层级为王

15.Hierarchy is king.

使用 字重、字号和颜色 来打造样式层级。            

用字重、字号和颜色来区分层级（右）

16.避免空白感

16.Avoid that empty feeling.

有指导性的“空状态”来提示用户初始行动。           

用让用户有事情做的“空状态”（右）

17.拓展行高

17.Expand that line-height.

字号越小，行高应该要越大。           

降低标题的行高（下）

18.删掉多余内容

18.Cut out the fluff.

让你的信息 简短亲切，删掉不必要的文字。  

精简文案（下）

19.无障碍或打道回府

19.Go accessible or go home

要考虑到无障碍性，不要 只依靠颜色来传达表单中的错误信息。            

用更多信息让用户知道为什么出错（右）

20.重要前置

20.Front and center!

不要把重要的操作塞到下拉菜单里面。把重要的事物放在前面，放在中心。

把重要的操作从“下拉菜单”里面放出来（下）

21.拇指为王

21.Thumbs still rule!

改善用户新手教程体验，让这些点击触手可及。拇指仍旧是驾驭者。

把操作放在拇指可以轻易触达的位置（右）

22.投影光源

22.Here comes the sun…

确保阴影是从一个光源来的。记住我们不是生活在有千缕阳光的地方。

投影的方向只来自于一个光源

23.CTA按钮是VIP

23.CTAs are the VIPs.

总是要让“行为召唤按钮”成为界面最显眼的项目。

“行为召唤按钮”要成为界面最显眼的存在（右）

24.给面包屑一点关爱

24.Show those crumbs some love.

让面包屑突出，从而更好为用户起到导航作用。给他们一点关爱吧。

让“面包屑”看起来更像可操作的导航（下）

25.削减噪音

25.Cut out that noise!

最大限度提升“信噪比”，削减噪音，传达清晰。

直来直往，传递清晰（右）

26.让字母呼吸

26.Let those letters breathe.

在处理全大写字母的文本片段是，记住用“全大写+增加字母间距=更好的可读性”。

全大写字母时，用更大的字母间距（下）

27.吸引用户

27.Draw the user in.

当处理长篇幅内容时，对开头的段落进行设计，以吸引用户。

长文本时，开头段落适当高亮设计（右）

28.拓展交互空间

28.Give those digits some room.

在移动端尝试创造大方的可点击区域。人们的手指尺寸不尽相同，因此给他们一点空间。

在移动端创造更大的热区（右）

29.简单更好

29.Simple is better.

用简单的叠加图层在浅色文字和图片之间 保持合适的对比度

用叠加图层区域文字和图像（右）

30.找到节奏

30.You got the rhythm.

把握好间距，在标题和正文之间实现完美的垂直韵律。

合适的间距，让文本排版更有“呼吸感”（右）

31.泾渭分明

31.It’s all about U & I.

让界面中的各个元素 易于区分。

让元素之间更容易互相区分开（右）

32.减少视觉伤害

32.Go easy on those optics.

降低文字对比度，使用深色模式时避免纯黑色，减少对眼睛的伤害。

深色模式时，降低文字的对比度（右）

33.阴影的作用

33.The power of the dark-side.

在处理深色模式时，使用阴影的色调来有效传达一个元素的高度。

近浅远深

34.确保圆角正确

34.Make sure those Radii are ‘on’

使用补偿的边界圆角，避免让事情看起来“不对劲”

让内框与外框的圆角看起来是顺畅衔接的（下）

希望通过这些小技巧集，你能够认识到即使是设计中一些小小的调整，都可以对你和你的用户产生很好的结果。

原文：https://www.marcandrew.me/ui-ux-micro-tips-8-bit-edition/

作者：Marc Andrew

译者：蓝建杭

审核：李泽慧

编辑：孙淑雅、李莉好

本文翻译已获得作者的正式授权（授权截图如下） 

---

往期精选文章：

---

- 设计师自习社区 -

TCC 设计情报局欢迎小伙伴加入，一起交流设计知识，了解全球设计资讯，锻炼英文能力，发掘更多可能性～

添加小助手微信，备注「社群」，即可加入读者群。